<template>
  <div class="total">
    <!-- <el-image :src="pic" fit="contain" lazy @mouseover="mouseover"> </el-image> -->
    <img :src="pic" alt="" @mouseover="mouseover" />
    <div class="edit">
      <span>{{ info }}</span>
      <star theme="two-tone" size="24" :fill="['#333', '#5fc5ba']" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

// 鼠标悬浮事件
const mouseover = () => {};
const info = ref("description");
// 接收props
type Props = {
  pic: string;
};
withDefaults(defineProps<Props>(), {
  pic: "",
});
</script>

<style lang="scss" scoped>
$item-height: 0.36rem;
$item-width: 0.6rem;
$a-font-size: 0.08rem;
$theme-color: rgb(96, 197, 186); //#5fc5ba
.total {
  break-inside: avoid;
  width: $item-width * 2;
  height: auto;
  color: #425551;
  border-radius: 0.1rem;
  .el-image {
    width: 100%;
  }

  img {
    width: $item-width * 2.4;
    height: auto;
    break-inside: avoid;
    border-radius: 0.1rem;
    &:hover {
      transform: scale(1.02, 1.02);
    }
  }

  span {
    font-size: 0.1rem;
  }
  .edit {
    height: $item-height * 0.8;
    text-align: center;
  }
}
</style>
